<div class="drag-drop-container" ref="tabContainer">
    <div class="view-tab ${viewable.id === active.id ? 'active' : ''} ${'status-' + viewable.environment.status}"
         repeat.for="viewable of orderedViewables"
         data-id.bind="viewable.id"
         data-name.bind="viewable.name"
         title.bind="viewable.environment.script.path || (viewable.isDirty ? 'Unsaved' : '')">
        <div class="view-tab-content"
             click.trigger="activate(viewable)"
             auxclick.trigger="close(viewable, $event)">

            <div class="script-name">
                <img src.bind="viewable.environment.script.config.kind | langLogo"
                     alt=""
                     style="max-height: 1rem" class="me-3"/>
                ${viewable.name}
                <small
                    class="database-icon ms-3 ${viewable.environment.script.dataConnection.containsProductionData ? 'is-production' : ''}"
                    show.bind="viewable.environment.script.dataConnection"
                    title="${viewable.environment.script.dataConnection.name} ${viewable.environment.script.dataConnection.containsProductionData ? '(Production)' : ''}"></small>
            </div>

            <div class="script-status"
                 if.bind="settings.appearance.showScriptRunStatusIndicatorInTab"
                 switch.bind="viewable.environment.status">
                <spinner case="Running"
                         class="script-running-indicator"
                         title="Running..."></spinner>
                <spinner case="Stopping"
                         class="script-stopping-indicator"
                         title="Stopping..."></spinner>
                <i case="Ready" if.bind="viewable.environment.runDurationMilliseconds != null"
                   class="script-status-success-icon icon-xs"
                   title="Script ran successfully"></i>
                <i case="Error"
                   class="script-status-error-icon icon-xs"
                   title="Error occurred"></i>
            </div>
        </div>
        <div class="view-tab-addon ${viewable.isDirty ? 'is-dirty' : ''}">
            <i class="dirty-flag script-status-dirty-icon icon-xs"
               title="Error occurred"></i>
            <i class="view-tab-close-button close-icon action-icon"
               title="${shortcutManager.getShortcutByName('Close').toString()}"
               click.trigger="close(viewable)"></i>
        </div>
    </div>
</div>

<div class="view-tab new-tab"
     click.trigger="new()"
     title="${shortcutManager.getShortcutByName('New').toString()}">
    <i class="add-script-icon icon-button"></i>
</div>

<context-menu options.bind="tabContextMenuOptions"></context-menu>
